<!--
 * @Author: tianhao
 * @Date: 2022-12-30 16:38:51
 * @LastEditTime: 2023-02-21 19:35:52
 * @LastEditors: tianhao
 * @Description: 
 * @FilePath: \dcollege\src\views\task\dlpage.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <div class="bg">
    <div class="top">
      <var-icon name="chevron-left" :size="30" class="ret" @click="fanHui()" />
    </div>
    <div class="topic">{{ $route.query.name }}</div>
    <div class="message">
      <div class="box1">
        <div class="title">考试人数</div>
        <div class="count">{{ $route.query.count }}</div>
        <div class="word">人</div>
      </div>
      <div class="box2">
        <div class="title">考试时长</div>
        <div class="count">125</div>
        <div class="word">分钟</div>
      </div>
      <div class="box3">
        <div class="title">及格标准</div>
        <div class="count">60</div>
        <div class="word">分</div>
      </div>
    </div>
  </div>
  <!-- <var-button block type="danger" class="bt1" size="large">练习模式</var-button> -->
  <var-button block type="primary" class="bt2" size="large">模拟考试</var-button>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
const router = useRouter();
// const data = sessionStorage.getItem('list')
// console.log(data)
function fanHui() {
  router.go(-1);
}
</script>

<style lang="less" scoped>
.top {
  width: 100%;
  height: 60px;
  border-bottom: none;
}
.ret {
  float: left;
  margin-top: 30px;
}
.bg {
  width: 100%;
  height: 100%;
  background: url(./image/dlpage.png);
  background-repeat: no-repeat;
  background-size: 330px 350px;
  background-position: 20px 40px;
}
// img{
//   position: absolute;
//   width: 85%;
//   height: 400px;
//   margin-left: 30px;
//   z-index: 200;
// }
.topic {
  margin: 150px auto auto 20px;
  font-size: 21px;
  font-weight: bolder;
  z-index: 1;
  text-align: center;
}
.message {
  width: 90%;
  height: 100px;
  margin: 50px auto auto 20px;
}
.box1 {
  float: left;
  margin-right: 105px;
}
.box2 {
  width: 70px;
  float: left;
  margin-right: 70px;
}
.title {
  font-size: 13px;
  color: rgb(132, 132, 132);
}
.count {
  font-size: 23px;
  color: rgb(66, 106, 237);
  float: left;
  font-weight: bolder;
}
.word {
  font-size: 13px;
  color: rgb(132, 132, 132);
  margin-top: 8px;
  margin-left: 30px;
}
.bt1 {
  width: 40%;
  --button-border-radius: 10px;
  margin-left: 20px;
  --button-large-height: 36px;
  float: left;
  --button-border-radius: 20px;
}
.bt2 {
  width: 90%;
  --button-border-radius: 10px;
  margin-right: 20px;
  margin-top: 20px;
  --button-large-height: 36px;
  float: right;
  --button-border-radius: 20px;
}
</style>
